/***************************************************************************
*  ec4_oc_matrix_kago_v3.css  2019/08/22 15:25
******************************************************************<')>>><**/


/*common*/
.matrix_kago_v3{
	margin: 10px 10px 30px;
}

	/* Basic structure */
/*
.box_matrix  外枠。ページ毎にIDをつけておくことでまとめて幅を後付け指定できるよにも
.category  種類とか　背景に画像入れられるとよい
.ship    配送日とか入れる　テキスト想定
.basket  いれもの　中はflex で適宜分割
*/


.matrix_kago_v3 .box_matrix{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: stretch;
}
.matrix_kago_v3 .box_matrix .category,
.matrix_kago_v3 .box_matrix .ship{ flex-grow: 1; flex-basis: 50%;}
.matrix_kago_v3 .box_matrix .basket{ flex-grow: 1; flex-basis: 100%;}


/* PC▽ */ @media only screen and (min-width: 768px) {
	.matrix_kago_v3 .box_matrix{ flex-wrap: nowrap;}
	.matrix_kago_v3 .box_matrix .category{ flex-grow: 1; flex-basis: 25%;}
	.matrix_kago_v3 .box_matrix .ship{ flex-grow: 1; flex-basis: 15%;}
	.matrix_kago_v3 .box_matrix .basket{ flex-grow: 4; flex-basis: 60%;}
}/*△*/

.matrix_kago_v3 .box_matrix .category,
.matrix_kago_v3 .box_matrix .ship,
.matrix_kago_v3 .box_matrix .basket{ border: 1px solid #999; border-bottom-width: 0;}
.matrix_kago_v3 .box_matrix .ship{ border-left-width: 0;}

/* sp▽ */ @media only screen and (max-width: 768px) {
	.matrix_kago_v3 .box_matrix .basket{ border-bottom-width: 1px;}
	.matrix_kago_v3 .box_matrix.matrix_header .basket,
	.matrix_kago_v3 .box_matrix .category,
	.matrix_kago_v3 .box_matrix .ship{ height: 3em;}

}/*△*/
/* PC▽ */ @media only screen and (min-width: 768px) {
	.matrix_kago_v3 .box_matrix .ship{ border-left-width: 0; border-right-width: 0;}
	.matrix_kago_v3 .box_matrix:last-of-type .category,
	.matrix_kago_v3 .box_matrix:last-of-type .ship,
	.matrix_kago_v3 .box_matrix:last-of-type .basket{ border-bottom-width: 1px;}
}/*△*/

.matrix_kago_v3 .box_matrix.matrix_header .basket,
.matrix_kago_v3 .box_matrix .category,
.matrix_kago_v3 .box_matrix .ship{
	position: relative;
}

.matrix_kago_v3 .box_matrix .category{
	background-position: left bottom;
	background-size: auto 100%;
	background-repeat: no-repeat;
}



.matrix_kago_v3 .box_matrix.matrix_header .basket .hd_text,
.matrix_kago_v3 .box_matrix .category b,
.matrix_kago_v3 .box_matrix .ship b{
	position: absolute;
	top: 50%; transform: translateY(-50%);
	left: 0;
	display: inline-block;
	width: 100%;
	text-align: center;
}
/* PC▽ */ @media only screen and (min-width: 768px) {
	.matrix_kago_v3 .box_matrix.matrix_header .basket .hd_text,
	.matrix_kago_v3 .box_matrix.matrix_header .category b,
	.matrix_kago_v3 .box_matrix.matrix_header .ship b{ font-size: 18px;}
	.matrix_kago_v3 .box_matrix.matrix_link .category b{ left: 0;}

}/*△*/






.matrix_kago_v3 .box_matrix.matrix_link .basket{
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	padding: 10px 0;
}

.matrix_kago_v3 .box_matrix.matrix_link .basket .linkbtn{
	margin: 0 5px;
	width: 100%;
}
/* PC▽ */ @media only screen and (min-width: 768px) {
	.matrix_kago_v3 .box_matrix.matrix_link .basket .linkbtn{ max-width: 350px;}
}/*△*/



	/* Decoration elements */
/*
.matrix_header  見出し用の色とか
.matrix_link    linkボタン並べる用の色
*/


.matrix_kago_v3 .matrix_header{
	height: 6em;
	color: white;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Noto Serif JP", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	transform: rotate(0.03deg); 
	background: #461F04;
	background: linear-gradient(to bottom,rgb(107,75,54) 0%,rgb(88,53,29) 10%,rgb(70,31,4) 50%,rgb(66,29,3) 80%,rgb(66,29,3) 98%,rgb(66,29,3) 100%);
	box-shadow: 0px 0px 20px rgb(0,0,0) inset;
}

.matrix_kago_v3 .matrix_link{}


/* PC▽ */ @media only screen and (min-width: 768px) {
	.matrix_kago_v3 .matrix_header{ height: 3em;}
}/*△*/



	/* Additional elements */

/*
.linkbtn  カゴへボタン(黄)
.linkbtn.sold  〃 完売表示
*/


.matrix_kago_v3 a.linkbtn{
	display: block;
	padding: 10px;
	width: 100%;
	font-size: 14px; font-weight:bold; color: #4d3d32 !important; text-align: center;
	border-radius: 8px;
	background-color: #fff100;
	background: #fff100 url( '../../../../../content_image/parts/cssimg/icon_cart_brown.svg' ) calc( 50% - 59px ) 48% / 20px auto no-repeat scroll;
}
.matrix_kago_v3 a.linkbtn::before{ content:"購入ページへ";}
.matrix_kago_v3 a.linkbtn:hover{ 
	background-color: #FFD25C;
	background: #FFD25C url( '../../../../../content_image/parts/cssimg/icon_cart_brown.svg' ) calc( 50% - 59px ) 48% / 20px auto no-repeat scroll;
}

	/*linkbtn-売切れ*/
.matrix_kago_v3 a.linkbtn.sold{ background:#bebebe;}
.matrix_kago_v3 a.linkbtn.sold::before{
	background-image:none;
	content:"完売しました" !important;
	color:#888888;
}

/* PC▽ */ @media only screen and (min-width: 768px) {
	.matrix_kago_v3 a.linkbtn{ width: 350px;}
}/*△*/